<template>
  <div>
    <el-select
      ref="selectRef"
      size="small"
      :disabled="disabled"
      :multiple="multiple"
      clearable
      filterable
      remote
      :remote-method="remoteSearch"
      :placeholder="'请选择 '+placeholderText"
      v-model.trim="select"
      @change="handleChange"
      @clear="handleClear"
      :loading="loading">
      <!-- @visible-change="handleVisible" -->
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
      </el-option>
      <div class="pagin" v-if="pageNumberAll>10">
        <el-pagination small background layout="prev, pager, next, total" :page-size="pageSize" :total="pageNumberAll" :current-page="pageNumber" @current-change="page"> </el-pagination>
      </div>
    </el-select>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  props: {
    // 绑定的值（双向绑定显示的值）
    select: {
      type: [String,Array,Number],
      default: ''
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 请求地址
    url: {
      type: String,
      required: true
    },
    // 提示文本
    placeholderText: {
      type: String,
      default: ''
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 模糊查询关键字
    filterKey: {
      type: String,
      default: ''
    },
    // 其他查询参数
    searchParams: {
      type: Object,
      default: () => {}
    },
    // 下拉修改时使用到的参数
    editinfo: {
      type: Object,
      default: () => {}
    },
    // 行下标唯一标识
    rowIndex: {
      type: Number,
      default: undefined
    },
    // 下拉显示的文字
    label: {
      type: String,
      default: ''
    },
    // 下拉选择的值
    value: {
      type: [String,Array,Number],
      default: ''
    }
  },
  data() {
    // 这里存放数据
    return {
      options: [],
      pageNumber: 1,
      pageSize: 10,
      pageNumberAll: 0,
      loading: false,
      params: {}
    };
  },
  computed: {
    ...mapGetters(["selectMer"]),
    linkUrl() {
      return params => {
        let linkUrl = "";
        Object.assign(params,this.searchParams);

        for (const key in params) {
          if (Object.hasOwnProperty.call(params, key)) {
            let value = params[key];
            linkUrl += `&${key}=${value}`;
          }
        }
        return linkUrl
      }
    }
  },
  mounted() {
    // 函数调用顺序要在options赋值为空数组之后
    // this.initData();
    this.getOptionList();
  },
  watch: {
    select(value) {
      if (!value) {
        this.select = '';
        this.getOptionList();
      }
    }
  },
  // 方法集合
  methods: {
    /* 处理值改变事件 */
    handleChange(value) {
      this.$emit('update:select', value);
      this.$emit('getStationType', this.rowIndex, this.tableData);
    },
    /* 点击清空按钮触发 清空方法 */
    handleClear() {
      this.select = '';
      this.params = {};
      this.$emit('clear:select');
    },
    /* 下拉框隐藏事件 当前弃用 */
    handleVisible(val) {
      // 下拉框隐藏后重新加载下拉数据
      // console.log(this.$refs.selectRef.visible);
      // if(!val) {
      //   this.getOptionList();
      // }
      if (val) {
        this.getOptionList();
        this.select = '';
      } else {
        this.pageNumber = 1;
      }
      // this.getOptionList();
    },
    /* 过滤，实现模糊查询 */
    remoteSearch(value = '') {
      this.pageNumber = 1;
      // let params = "";
      let that = this;
      that.select = value;
      if (value) {
        this.$emit('update:select', value);
      }
      this.getOptionList(that.params);
    },
    /* 获取列表数据 */
    getOptionList(params = {}) {
      this.loading = true;
      this.options = [];
      let that = this;

      let query = "";

      if (JSON.stringify(params) !== "{}") {
        that.params = params;
        if (that.filterKey) {
          query = this.linkUrl({[that.filterKey]: that.select, ...that.params});
        } else {
          query = this.linkUrl(that.params);
        }
      } else {
        if (that.filterKey) {
          query = this.linkUrl({[that.filterKey]: that.select});
        }
      }
      
      this.$http.get('/api/rb-merchant/merchant/'+this.url+"?current="+that.pageNumber+"&size=10"+query)
        .then(({data: d}) => {
          if(d.code == 200) {
            this.pageNumberAll = d.data.total;
            this.tableData = d.data.records;
            d.data.records.forEach(item => {
              that.options.push({
                label: item[that.label],
                value: item[that.value]
              });

            });
            this.loading = false;
          }
        });
      // 这里主要针对修改操作，如果当前下拉显示的值没有在下拉选项数组里（因为options数组里的值是会变化的）
      // 显示时会将value转换成字符串然后显示，所有将这条修改的数据添加到选项数组中
      if(this.editinfo && (JSON.stringify(this.editinfo)) != '{}') {
        this.options.push(this.editinfo);
      }
    },
    /* 初始化数据 */
    initData() {
      // 当父组件上存在值时，对select值进行初始化
      // this.select = this.select;
    },
    /* 主表格分页点击事件 */
    page(page) {
      this.pageNumber = page;
      this.getOptionList(this.params); // 更新
    }
  }
};
</script>
<style lang="scss" scoped>
.option{
  min-height: 50px;
  height: auto;
  max-height: 150px;
  overflow-y: auto;
}
.pagin{
  background:#FFFFFF;
  padding-top: 2px;
}
::-webkit-scrollbar{
  width: 2px;
}

// /deep/ .el-select-dropdown__wrap {
//   height: auto !important;
// }
</style>
